<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div v-if="true">
      <el-row>
        <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
          <span style="font-size: 14px;color: #747778">单位信息</span>
        </el-col>

        <el-col :offset="18" :span="2" align="right">
          <el-button v-show="canEdit && editable" size="small" @click="edit()" plain>编辑</el-button>
        </el-col>
      </el-row>

      <!--单位信息展示 根据就业状况选择是否展示-->
      <el-form ref="personInfo"
               :model="personInfo"
               :rules="rules"
               :class="{cardBackColor:!canEdit}"
               v-loading="loading"
               style="text-align: left;padding-top: 12px" inline >
        <el-row style="padding-left: 12px;padding-right: 12px;padding-bottom: 10px">
          <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light" :disabled="disabledName">
            <div slot="content">{{personInfo.companyName}}</div>
            <el-form-item label="单位名称" prop="companyName">
              <ft-input :editing="!canEdit" v-model="personInfo.companyName"></ft-input>
            </el-form-item>
          </el-tooltip>
        </el-col>
          <el-col :md="8" :lg="6">
              <el-form-item label="单位性质" prop="companyNature">
                <ft-data-enum-select
                  v-model="personInfo.companyNature"
                  type-name="companyNatureEnum"
                  placeholder="请选择单位性质"
                  :editing="!canEdit">
                </ft-data-enum-select>
              </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="行业门类"  prop="companyIndustry">
              <ft-data-enum-select v-model="personInfo.companyIndustry"
                              type-name="industryCategories"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-tooltip placement="top" effect="light" :disabled="disabledAdd">
              <div slot="content" >{{personInfo.companyAddress}}</div>
              <el-form-item label="单位地址" prop="companyAddress">
                <ft-input :editing="!canEdit" v-model="personInfo.companyAddress"></ft-input>
              </el-form-item>
            </el-tooltip>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="单位邮编" prop="companyPostcode">
              <ft-number-input :editable="!canEdit" :split="false" v-model="personInfo.companyPostcode" :precision='[6]' />
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="单位行政区划">
              <ft-data-enum-select v-model="personInfo.companyAdministrative"
                              type-name="area"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-tooltip placement="top" effect="light" :disabled="disabledAdd">
              <div slot="content" >{{personInfo.companyPhone}}</div>
              <el-form-item label="单位电话" prop="companyPhone">
                <ft-input :editing="!canEdit" v-model="personInfo.companyPhone"></ft-input>
              </el-form-item>
            </el-tooltip>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="职业" prop="profession">
              <ft-data-enum-select v-model="personInfo.profession"
                              type-name="GB-T-6565-2009"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="职务" prop="job">
              <ft-data-enum-select v-model="personInfo.job"
                              type-name="postLevel"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="职称" prop="professionalTitle">
              <ft-data-enum-select v-model="personInfo.professionalTitle"
                              type-name="title"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="入职年份" prop="companyStartDate">
              <ft-date-picker v-model="personInfo.companyStartDate"
                              type="year"
                              format="yyyy"
                              valueFormat="yyyy"
                              :editing="!canEdit">
              </ft-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px" v-show="!canEdit"/>
        <el-row style="padding:8px 0px" v-show="!canEdit">
          <el-col style="text-align: right">
            <el-button size="mini" @click="cancel">取消</el-button>
            <el-button size="mini" type="primary" @click="onSave"
                       style="margin-left: 24px;margin-right: 36px"
                       :disabled="canEdit">保存
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
  import FtDatePicker from "../ft/FtDatePicker"
  import FtInput from "../ft/FtInput"
    export default {
      name: "CompanyInfo",
      components:{FtDatePicker,FtInput},
      props:{
        customerId: {
          type : String,
          default : '',
        },
        dataVersion: {
          type : Number,
          default : 0,
        },
        showCompanyInfo: {
          type : Boolean,
          default : false,
        },
        editable: {
          type : Boolean,
          default : true,
        },
      },
      data(){
          return {
            personInfo:{},
            personInfoBack:{},
            canEdit:true,
            outTime:0,
            //加载动画
            loading:false,
            disabledName:true,
            disabledAdd:true,
            rules:{
              companyName:[
                {max: 80, message: '输入字符不得超过80字', trigger: 'blur'}],
              companyAddress:[
                {max: 100, message: '输入字符不得超过100字', trigger: 'blur'}],
              // companyPostcode:[
              //   {max: 6, message: '输入字符不得超过6字', trigger: 'blur'}],
              companyPhone:[
                {max: 25, message: '输入字符不得超过25字', trigger: 'blur'}],
            }
          }
      },
      mounted(){
        this.load()
      },
      watch:{
        showCompanyInfo(){
          if (this.showCompanyInfo==false){
            this.deleteCompany()
          }
        }
    },
      methods:{
        //表单取消按钮
        cancel(){
          this.canEdit = true
        },
        onSave(){
          this.loading=true
          if (this.dataVersion > this.personInfo.dataVersion) {
            this.personInfo.dataVersion = this.dataVersion
          }
          this.$refs.personInfo.validate((valid) => {
            if (valid) {
              this.$http.put('/joys-rest/lss-customer/custInfo/person/',this.personInfo, {
                params: {
                  sourceModule: "单位信息",
                }
              }).then(
                resp=>{
                  this.personInfo=resp.body
                  this.canEdit=true
                  this.loading=false
                  //初始信息框
                  this.disabledName = true
                  //信息框有值就显示
                  if (this.personInfo.companyName != '' && this.personInfo.companyName != null) {
                    this.disabledName = false
                  }
                  if (this.personInfo.companyAddress != '' && this.personInfo.companyAddress != null){
                    this.disabledAdd = false
                  }
                  //更新dataVersion值
                  this.$emit("changeDataVersion",this.personInfo.dataVersion)
                  this.$message.success("保存成功！")
                },
                resp=>{
                  this.loading=false
                  this.$message.error(resp.body.message)
                })
            }
            else{
              this.loading=false
              return false;
            }
          })
        },
        load(){
          this.$http.get('/joys-rest/lss-customer/custInfo/person/'+this.customerId).then(
            resp=>{
              this.personInfo=resp.body
              if (this.personInfo.companyName != '' && this.personInfo.companyName != null) {
                this.disabledName = false
              }
              if (this.personInfo.companyAddress != '' && this.personInfo.companyAddress != null){
                this.disabledAdd = false
              }
              if (this.emptyData(this.personInfo)) {
                this.$emit("changeCompany",{showCompanyInfo:true})
              }else{
                this.$emit("changeCompany",{showCompanyInfo:false})
              }
            },
            resp=>{
              this.$message.error(resp.body.message)
            }
          )
        },
        //表单编辑按钮
        edit(){
          this.canEdit = false
          this.personInfoBack = JSON.parse(JSON.stringify(this.personInfo))
        },
        emptyData(obj) {
          if (obj.companyName != null) {
            return true
          }
          if (obj.companyIndustry != null) {
            return true
          }
          if (obj.companyAddress != null) {
            return true;
          }
          if (obj.companyPostcode != null) {
            return true
          }
          if (obj.companyAdministrative != null) {
            return true
          }
          if (obj.professional != null) {
            return true
          }
          if (obj.job != null) {
            return true
          }
          if (obj.professionalTitle != null) {
            return true
          }
          if (obj.companyPhone != null) {
            return true
          }
          if (obj.companyStartDate != null) {
            return true
          }
        },
        //根据客户主键删除单位信息
        deleteCompany(){
          this.$set(this.personInfo,'companyName',null)
          this.$set(this.personInfo,'companyIndustry',null)
          this.$set(this.personInfo,'companyAddress',null)
          this.$set(this.personInfo,'companyPostcode',null)
          this.$set(this.personInfo,'companyAdministrative',null)
          this.$set(this.personInfo,'companyPhone',null)
          this.$set(this.personInfo,'profession',null)
          this.$set(this.personInfo,'job',null)
          this.$set(this.personInfo,'professionalTitle',null)
          this.$set(this.personInfo,'companyStartDate',null)
          this.onSave()
        }
      }
    }
</script>

<style scoped>

</style>
